(function (w) {
  $(function () {

    class seletorCar {
      constructor({ item }) {
        this.seletorCar = item;
        this.CarGroupindex;//当前汽车索引
        this.seriesSlide = this.seletorCar.find('.seletor-series ul');

        this.data = [
          [{ img: "./img/selector-Car/1系、2系/1-1.png", h4: 'BMW 1系三厢运动轿车', h5: '车型售价 ￥198,800起' }]
          , [{ img: "./img/selector-Car/1系、2系/2-1.png", h4: 'BMW 2系双门轿跑车2019款', h5: '车型售价 ￥263,800起' },
          { img: "./img/selector-Car/1系、2系/2-2.png", h4: 'BMW 2系敞篷轿跑车2019款', h5: '车型售价 ￥309,800起' },
          { img: "./img/selector-Car/1系、2系/2-3.png", h4: 'BMW 2系多功能旅行车', h5: '车型售价 ￥263,800起' }],
          [{ img: "./img/selector-Car/3系、4系/3-1.png", h4: '全新BMW 3系', h5: '车型售价 ￥293,900起' },
          { img: "./img/selector-Car/3系、4系/3-1.png", h4: 'BMW 3系GT', h5: '车型售价 ￥359,800起' }],
          [{ img: "./img/selector-Car/3系、4系/4-1.png", h4: '全新BMW 4系双门轿跑车', h5: '车型售价 不要钱免费送' },
          { img: "./img/selector-Car/3系、4系/4-2.png", h4: 'BMW 4系敞篷轿跑车2019款', h5: '车型售价 ￥516,800起' },
          { img: "./img/selector-Car/3系、4系/4-3.png", h4: 'BMW 4系四门轿跑车2020款', h5: '车型售价 ￥359,800起' }],
          [{ img: "./img/selector-Car/5、6、7、8系/5-1.png", h4: 'BMW 5系四门轿车', h5: '车型售价 ￥423,900起' }],
          [{ img: "./img/selector-Car/5、6、7、8系/6-1.png", h4: 'BMW 6系GT', h5: '车型售价 ￥583,900起' }],
          [{ img: "./img/selector-Car/5、6、7、8系/7-1.png", h4: '新BMW 7系', h5: '车型售价 ￥828,000起' }],
          [{ img: "./img/selector-Car/5、6、7、8系/8-1.png", h4: '全新BMW 8系敞篷轿跑车', h5: '车型售价 ￥1,198,000起' },
          { img: "./img/selector-Car/5、6、7、8系/8-2.png", h4: '全新BMW 8系双门轿跑车', h5: '车型售价 ￥1,098,000起' },
          { img: "./img/selector-Car/5、6、7、8系/8-3.png", h4: '全新BMW 8系四门轿跑车', h5: '车型售价 ￥968,000起' }],
          [{ img: "./img/selector-Car/X-series/x1.png", h4: '新BMW X1', h5: '车型售价 ￥278,800起' },
          { img: "./img/selector-Car/X-series/x2.png", h4: '创新BMW X2', h5: '车型售价 ￥266,800起' },
          { img: "./img/selector-Car/X-series/x3.png", h4: '创新BMW X3', h5: '车型售价 ￥389,800起' },
          { img: "./img/selector-Car/X-series/x4.png", h4: '创新BMW X4', h5: '车型售价 ￥455,900起' },
          { img: "./img/selector-Car/X-series/x5.png", h4: '创新BMW X5', h5: '车型售价 ￥699,900起' },
          { img: "./img/selector-Car/X-series/x6.png", h4: '创新BMW X6', h5: '车型售价 ￥766,900起' },
          { img: "./img/selector-Car/X-series/x7.png", h4: '创新BMW X7', h5: '车型售价 ￥1,000,000起' }]
        ];
        this.init();
      }
      init() {
        var self = this;
        this.seletorCar.find('.seletor-series').on('click', 'li', function () {
          self.seletorCar.find('.seletor-series ul li').removeClass('on');
          $(this).addClass('on')

          self.resetUL(this);

          self.initCarShow(this);
        });

        this.seletorCar.find('.seletor-series ul li').get(0).click();
      }

      // 初始化 .car-show
      initCarShow(li) {
        var index = $(li).index();
        if (this.CarGroupindex == index) return;
        this.CarGroupindex = index;

        var str = this.data[index].map(item => {
          return ` <li>
                            <div class="img-wrap">
                            <img src=${item.img}>
                            <img src="./img/selector-Car/street.png">
                            </div>
                            <h4>${item.h4}</h4>
                            <h5>${item.h5}</h5>
                            <span><i class="iconfont icon-next01"></i>了解详情</span>
                            </li>`;
        }).join('');
        this.seletorCar.find('.car-show').fadeOut(0).html(str).fadeIn(400);
      }

      resetUL(li) {
        var itemX = li.getBoundingClientRect().x;
        var newX = document.documentElement.clientWidth / 2 - li.getBoundingClientRect().width / 2;
        var distance = newX - itemX;

        this.slideAnimate(distance, 300);
      }



      // 移动动画效果 计算出每毫秒的滑动距离，然后根据已经过去的时间设置left值
      /**
      *  @description 产生过度动画效果
      *  @param {number} distance 需要滑动的距离
      *  @param {number} decoration 动画的过度时间
      */
      slideAnimate(distance, decoration) {
        var distanceMS = distance / decoration;//每毫秒需要滑动的距离

        //初始 left位置
        var curLeft = this.seriesSlide.css('left').slice(0, -2);
        curLeft = parseInt(curLeft);

        var startTime = Date.now();
        var timer = setInterval(() => {
          var pasTime = Date.now() - startTime;

          var newLfet = curLeft + pasTime * distanceMS;

          if (newLfet > 0) {
            this.seriesSlide.get(0).style.left = '0px';
            clearInterval(timer);
            return;
          }

          var minLeft = this.seletorCar.find('.seletor-series').width() - this.seriesSlide.width();
          if (newLfet < minLeft) {
            if (minLeft < 0) {
              this.seriesSlide.get(0).style.left = minLeft + 'px';
            } else {
              this.seriesSlide.get(0).style.left = '0px';
            }
            clearInterval(timer);
            return;
          }

          this.seriesSlide.get(0).style.left = newLfet + 'px';

          if (pasTime >= decoration) {
            this.seriesSlide.get(0).style.left = curLeft + distance + 'px';
            clearInterval(timer);
          }
        }, 1000 / 60)
      }


    }

    new seletorCar({
      item: $('.seletor-Car')
    })


  })
})(window)


